.l-box {
    position: relative;

    .head {
        width: 100%;
        position: relative;
        background: linear-gradient(120deg, #F0B99D 0%, #F1A881 100%);
        z-index: 1;
        padding: 40rpx;

        .metal {
            width: 128rpx;
            height: 128rpx;
            margin: 0 auto;
            display: block;
        }

        .level-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 32rpx;
            color: white;
            margin-top: 20rpx;
        }

        .active {
            font-weight: 38rpx;
            font-weight: 600;
        }

        .line {
            margin-top: 40rpx;
            width: 100%;
            height: 4rpx;
            background: white;
            border-radius: 4rpx;
            position: relative;
        }

        .line11::before {
            content: '';
            position: absolute;
            width: 20rpx;
            height: 20rpx;
            border-radius: 20rpx;
            background: white;
            top:-8rpx;
            left: 0;
            z-index: 2;
            box-shadow: 0rpx 14rpx 46rpx 0rpx rgba(0, 0, 0, 0.04);
        }

        .line22::before {
            content: '';
            position: absolute;
            width: 20rpx;
            height: 20rpx;
            border-radius: 20rpx;
            background: white;
            top:-8rpx;
            left: 50%;
            z-index: 2;
            box-shadow: 0rpx 14rpx 46rpx 0rpx rgba(0, 0, 0, 0.04);
        }

        .line33::before {
            content: '';
            position: absolute;
            width: 20rpx;
            height: 20rpx;
            border-radius: 20rpx;
            background: white;
            top:-8rpx;
            left: 100%;
            z-index: 2;
            box-shadow: 0rpx 14rpx 46rpx 0rpx rgba(0, 0, 0, 0.04);
        }
    }

    .level-ct {
        padding: 40rpx;

        .txt1 {
            font-size: 30rpx;
            font-weight: 500;
            margin-bottom: 20rpx;
        }

        .progress-bar {
            width: 100%;
            height: 10rpx;
            border-radius: 10rpx;
            background: #eee;
            margin-top: 30rpx;
            margin-bottom: 30rpx;
            
            .bar-in {
                width: 25%;
                height: 10rpx;
                border-radius: 10rpx;
                background: #F1A881;
            }
        }

        .num {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 30rpx;
            font-weight: 500;
            width: 100%;
        }
    }
}